<template>
  <c-main-template title="企业认证" :isBreadcrumb="false">
    <el-form
      class="pd-20"
      label-width="auto"
      label-position="left"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
    >
      <el-row :gutter="24" v-loading="loading">
        <!-- 状态 -->
        <el-col :span="24" v-if="ruleForm.authStatus === 1">
          <el-alert
            class="mb-30"
            title="平台审核中，请耐心等待。"
            type="warning"
            show-icon
          />
        </el-col>
        <el-col :span="24" v-else-if="ruleForm.authStatus === 2">
          <el-alert
            class="mb-30"
            title="恭喜您通过企业认证！"
            type="success"
            show-icon
          />
        </el-col>
        <el-col :span="24" v-else-if="ruleForm.authStatus === 3">
          <el-alert
            class="mb-30"
            :title="`审核未通过，驳回原因：${ruleForm.remarks}`"
            type="error"
            show-icon
          />
        </el-col>
        <!-- 企业信息 -->
        <el-col :span="24">
          <div class="title">企业信息</div>
        </el-col>
        <el-col :span="24" class="mr-30 ml-30 mt-sm">
          <el-col :span="9">
            <el-form-item label="企业名称" prop="name">
              <div class="flex-y-center wh">
                <el-input
                  :disabled="disabled"
                  class="flex-1"
                  :class="disabled || 'denterprise-name'"
                  placeholder="请输入企业名称"
                  size="large"
                  v-model="ruleForm.name"
                  @blur="onDraftSave"
                />
                <div
                  v-if="!disabled"
                  class="enterprise-select flex-center pointer"
                  @click="handleSelectByName()"
                >
                  查询
                </div>
                <el-tooltip
                  v-if="!disabled"
                  effect="dark"
                  content="输入企业全称，可自动带出以下企业信息"
                  placement="right"
                >
                  <div class="enterprise-img ml-sm flex-center pointer">
                    <img src="@/assets/img/help.png" />
                  </div>
                </el-tooltip>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="统一社会信用代码" prop="creditno">
              <el-input
                :disabled="disabled"
                placeholder="请输入统一社会信用代码"
                size="large"
                v-model="ruleForm.creditno"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="企业类型" prop="type">
              <el-select
                v-model="ruleForm.type"
                placeholder="请选择企业类型"
                size="large"
                class="wh"
                :disabled="disabled"
                @blur="onDraftSave"
              >
                <el-option
                  v-for="item in enterpriseType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="法人" prop="legal">
              <el-input
                placeholder="请输入法人"
                size="large"
                :disabled="disabled"
                v-model="ruleForm.legal"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="邮箱" prop="email">
              <el-input
                placeholder="请输入邮箱"
                size="large"
                :disabled="disabled"
                v-model="ruleForm.email"
                @blur="onDraftSave"
              />
              <el-tooltip
                effect="dark"
                content="请输入常用邮箱，用来接收签约邮件"
                placement="right"
                v-if="!disabled"
              >
                <div class="enterprise-img ml-sm flex-center pointer">
                  <img src="@/assets/img/help.png" />
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="联系电话" prop="mobile">
              <el-input
                placeholder="请输入联系电话"
                size="large"
                :disabled="disabled"
                v-model="ruleForm.mobile"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="注册资本" prop="registerCapital">
              <el-input
                placeholder="请输入注册资本"
                size="large"
                :disabled="disabled"
                v-model="ruleForm.registerCapital"
                @blur="onDraftSave"
              >
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker
                v-model="ruleForm.establishDate"
                type="date"
                :disabled="disabled"
                value-format="YYYY-MM-DD"
                class="wh"
                placeholder="请选择成立日期"
                size="large"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="注册地址" prop="addressDetails">
              <el-input
                :disabled="disabled"
                v-model="ruleForm.addressDetails"
                :autosize="{ minRows: 4, maxRows: 5 }"
                type="textarea"
                placeholder="请输入注册地址"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="经营范围" prop="businessScope">
              <el-input
                :disabled="disabled"
                v-model="ruleForm.businessScope"
                :autosize="{ minRows: 4, maxRows: 5 }"
                type="textarea"
                placeholder="请输入经营范围"
                @blur="onDraftSave"
              />
            </el-form-item>
          </el-col>
        </el-col>

        <el-col :span="24">
          <div class="title">上传文件</div>
        </el-col>

        <el-col :span="24" class="mr-30 ml-30 mt-sm">
          <el-col :span="9">
            <el-form-item label="营业执照" prop="certificatePicPath">
              <div>
                <div class="mb-sm upload_tips">
                  仅支持.png、.jpg，且大小不超过500KB
                </div>
                <div class="flex">
                  <c-business-license
                    :disabled="disabled"
                    @update:modelValue="onDraftSave"
                    v-model="ruleForm.certificatePicPath"
                  />
                  <div class="living-example ml-lg">
                    <div class="living-example_img">
                      <img src="@/assets/img/shilietu_hengxiang.png" />
                    </div>
                    <div class="living-example_title mt-sm">示例图</div>
                  </div>
                  <div class="living-example ml-lg">
                    <div class="living-example_img">
                      <img src="@/assets/img/shilietu_zongxiang.png" />
                    </div>
                    <div class="living-example_title mt-sm">示例图</div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              class="mt-30"
              label="印章样本"
              prop="certificatePicPath"
            >
              <div>
                <div class="mb-sm upload_tips">
                  仅支持.png、.jpg，且大小不超过500KB
                </div>
                <div class="flex">
                  <el-form-item prop="sellerDetail.surname">
                    <div class="seal-sample">
                      <div class="seal-sample_upload">
                        <c-business-license
                          :disabled="disabled"
                          @update:modelValue="onDraftSave"
                          v-model="ruleForm.sellerDetail.surname"
                        />
                      </div>
                      <div class="seal-sample_title">公司章模</div>
                    </div>
                  </el-form-item>
                  <el-form-item prop="sellerDetail.signaturePrincipal">
                    <div class="seal-sample">
                      <div class="seal-sample_upload">
                        <c-business-license
                          :disabled="disabled"
                          @update:modelValue="onDraftSave"
                          v-model="ruleForm.sellerDetail.signaturePrincipal"
                        />
                      </div>
                      <div class="seal-sample_title">授权委托人签字</div>
                    </div>
                  </el-form-item>
                  <el-form-item prop="sellerDetail.legalSurname">
                    <div class="seal-sample">
                      <div class="seal-sample_upload">
                        <c-business-license
                          :disabled="disabled"
                          @update:modelValue="onDraftSave"
                          v-model="ruleForm.sellerDetail.legalSurname"
                        />
                      </div>
                      <div class="seal-sample_title">法定代表人人名章章模</div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" ">
              <div>
                <div class="mb-sm upload_tips">
                  请您按要求剪切您的印章扫描图像：长宽比例1:1并且让印章图像占满整个区域
                </div>
                <div class="flex">
                  <div class="seal-sample">
                    <div class="seal-example_img">
                      <img src="@/assets/img/success-yinzhang.png" />
                    </div>
                    <div class="seal-sample_title">正确示例图</div>
                  </div>
                  <div class="seal-sample">
                    <div class="seal-example_img">
                      <img src="@/assets/img/error-yinzhang.png" />
                    </div>
                    <div class="seal-sample_title">正确示例图</div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
        <!-- 0-未认证，1-认证中，2-已认证，3=已驳回 -->
        <el-col
          :span="24"
          class="ml-30 mt-40 mb-sm"
          v-if="ruleForm.authStatus !== 1"
        >
          <div class="flex-y-center">
            <div class="el-checkbox" @click="handleOpenManual">
              <div
                :class="ruleForm.manual ? 'is-checked' : ''"
                class="el-checkbox__input"
              >
                <div class="el-checkbox__inner"></div>
              </div>
              <div class="el-checkbox__label">同意《企业认证协议》</div>
            </div>
            <div class="save-time" v-if="time">已保存 {{ time }}</div>
          </div>
          <div class="mt-lg mr-30">
            <el-button
              :loading="buttonLoading"
              type="primary"
              size="large"
              @click="handleSubmt"
            >
              {{ ruleForm.authStatus === 0 ? "提交审核" : "重新认证" }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </c-main-template>
  <c-agreement ref="cAgreementRef" @change="ruleForm.manual = true" />
</template>
<script setup>
import { ref, computed, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import cAgreement from "./components/Agreement.vue";
import cBusinessLicense from "@/components/Upload/BusinessLicense.vue";
import { enterpriseType } from "@/utils/status.js";
import { deepClone, currentTime } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const buttonLoading = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
  manual: false,
  authStatus: 0,
  sellerDetail: {
    surname: "",
    signaturePrincipal: "",
    legalSurname: "",
  },
});
const cAgreementRef = ref();
const time = ref("");
const disabled = computed({
  get: () => {
    // <!-- 0-未认证，1-认证中，2-已认证，3=已驳回 -->
    return ruleForm.value.authStatus === 1 ? true : false;
  },
});
onMounted(() => {
  getByInfo();
});
const onDraftSave = () => {
  const data = JSON.stringify(ruleForm.value);
  proxy.$post({ url: "/draft/save", data: { business: 0, data } }).then(() => {
    time.value = currentTime();
  });
};

const handleSelectByName = () => {
  if (!ruleForm.value.name) {
    ElMessage.warning("请输入企业名称!");
    return;
  }
  loading.value = true;
  // 四川优狗科技有限公司
  // /businessLicense/getBusinesssInfoByKeyword
  proxy
    .$get({
      url: "/businessLicense/getBusinesssInfoByKeyword",
      params: {
        keyword: ruleForm.value.name,
      },
    })
    .then(
      (res) => {
        const fields = [
          { form: "name", key: "companyName" },
          { form: "type", key: "companyType" },
          { form: "creditno", key: "creditNo" },
          { form: "legal", key: "legalPerson" },
          { form: "registerCapital", key: "capital" },
          { form: "addressDetails", key: "companyAddress" },
          { form: "establishDate", key: "establishDate" },
          { form: "businessScope", key: "businessScope" },
          { form: "mobile", key: "" },
          { form: "certificatePicPath", key: "" },
        ];
        for (let i = 0; i < fields.length; i++) {
          if (fields[i].key && res[fields[i].key]) {
            ruleForm.value[fields[i].form] = res[fields[i].key];
          }
        }
        loading.value = false;
      },
      () => {
        loading.value = false;
      }
    );
};
const getByInfo = () => {
  loading.value = true;
  proxy.$post({ url: "/draft/get", data: { business: 0 } }).then((res) => {
    if (res && res.data) {
      ruleForm.value = JSON.parse(res.data);
      time.value = res.time;
      loading.value = false;
    } else {
      proxy.$get({ url: "/seller/detail" }).then((user) => {
        if (user.sellerInfo) {
          user.sellerInfo.manual = false;
          user.sellerInfo.email = user.email;
          user.sellerInfo.authStatus = user.authStatus;
          if (!user.sellerInfo.sellerDetail) {
            user.sellerInfo.sellerDetail = {};
          }
          ruleForm.value = user.sellerInfo;
        }
        loading.value = false;
      });
    }
  });
};
const handleSubmt = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const data = deepClone(ruleForm.value);
      data.establishDate = new Date(data.establishDate);
      if (!data.manual) {
        ElMessage.warning("请查看并同意企业认证协议!");
        return;
      }
      // 0-未认证，1-认证中，2-已认证，3=已驳回
      let url = {
        0: "/sellerInfo/certification",
        2: "/sellerInfo/anewCertification",
        3: "/sellerInfo/anewCertification",
      }[data.authStatus];
      buttonLoading.value = true;
      proxy.$post({ url, data }).then(
        (res) => {
          ElMessage.success("操作成功");
          getByInfo();
          buttonLoading.value = false;
        },
        () => {
          buttonLoading.value = false;
        }
      );
    }
  });
};

const handleOpenManual = () => {
  cAgreementRef.value.handleOpen();
};

const rules = ref({
  name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
  creditno: [
    { required: true, message: "请输入统一社会编码", trigger: "blur" },
  ],
  type: [{ required: true, message: "请选择企业类型", trigger: "change" }],
  legal: [{ required: true, message: "请输入法人", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮件", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  registerCapital: [
    { required: true, message: "请输入注册资本", trigger: "blur" },
  ],
  establishDate: [
    { required: true, message: "请选择成立日期", trigger: "change" },
  ],
  addressDetails: [
    { required: true, message: "请输入注册地址", trigger: "blur" },
  ],
  certificatePicPath: [
    { required: true, message: "请上传营业执照", trigger: "change" },
  ],
  "sellerDetail.surname": [
    { required: true, message: "请上传公司章模", trigger: "change" },
  ],
  "sellerDetail.signaturePrincipal": [
    { required: true, message: "请上传授权委托人签字", trigger: "change" },
  ],
  "sellerDetail.legalSurname": [
    { required: true, message: "请上传法人章模", trigger: "change" },
  ],
});
</script>
<style lang="less" scoped>
:deep(.el-input--large.enterprise-name .el-input__wrapper) {
  border-radius: var(--el-input-border-radius) 0px 0px
    var(--el-input-border-radius);
}
.upload_tips {
  font-size: 14px;
  color: #8d9297;
}

.enterprise-select {
  background: #3a85f5;
  font-weight: 400;
  color: #ffffff;
  padding: 0px 20px;
  height: 40px;
  font-size: 14px;
  border-radius: 0px 4px 4px 0px;
}
.enterprise-img {
  position: absolute;
  right: -25px;
  width: 16px;
  height: 16px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  color: #26282a;
  margin-bottom: 16px;
}
.save-time {
  font-size: 12px;
  color: #9a9a9a;
}
.living-example {
  position: relative;
}
.living-example_img {
  width: 90px;
  height: 90px;
  border: 1px dashed rgba(0, 0, 0, 0.17);
}
.living-example_title {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 12px;
  font-weight: 400;
  color: #8c8c8c;
  text-align: center;
}
.living-example_del {
  position: absolute;
  top: -5px;
  right: -5px;
  color: red;
  border-radius: 30px;
  z-index: 9999;
}
.seal-sample {
  margin-right: 30px;
  .seal-example_img {
    width: 110px;
    height: 110px;
  }
  .seal-sample_upload {
    display: flex;
    justify-content: center;
  }
  .seal-sample_title {
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    text-align: center;
  }
}
</style>